<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" href='@routes.Assets.at("css/bootstrap.min.css")'>
    <script src='@routes.Assets.at("js/jquery-1.7.2.min.js")' type="text/javascript"></script>
    <script src='@routes.Assets.at("js/bootstrap.js")' type="text/javascript"></script>
    <script src='@routes.Assets.at("js/bootstrap-carousel.js")' type="text/javascript"></script>
    <title>BS TEST</title>
</head>
<body>
<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li class="active">
                    <a href="#">
                        <i class="icon-home icon-white"></i>
                        主页
                    </a>
                </li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="span8">
            <div class="alert alert-success">
                <a class="close" data-dismiss="alert" href="#">×</a>
                <h4 class="alert-heading">Warning!</h4>
                Well done! You successfully read this important alert message.
            </div>
        </div>
    </div>


    <div id="myCarousel" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item span12">
                <ul class="thumbnails">
                    @for(i <- 1 to 6){
                    <li class="thumbnail span2">
                        <img src="http://img12.360buyimg.com/n3/14357/12063194-c5d4-4820-9a30-2876e9ec0332.jpg"/>
                        <h5>The Holburne Museum (Art) </h5>

                        <p>The Holburne opened its doors as Bath's first art museum in 1893 and has since continued to
                            attract gifts
                            and bequests</p>
                    </li>
                    }
                </ul>
            </div>
            <div class="item span12">
                <ul class="thumbnails">
                    @for(i <- 1 to 6){
                    <li class="thumbnail span2">
                        <img src="http://img12.360buyimg.com/n3/14357/12063194-c5d4-4820-9a30-2876e9ec0332.jpg"/>
                        <h5>The Holburne Museum (Art) </h5>

                        <p>The Holburne opened its doors as Bath's first art museum in 1893 and has since continued to
                            attract gifts
                            and bequests</p>
                    </li>
                    }
                </ul>
            </div>
            <div class="item span12">
                <ul class="thumbnails">
                    @for(i <- 1 to 6){
                    <li class="thumbnail span2">
                        <img src="http://img12.360buyimg.com/n3/14357/12063194-c5d4-4820-9a30-2876e9ec0332.jpg"/>
                        <h5>The Holburne Museum (Art) </h5>

                        <p>The Holburne opened its doors as Bath's first art museum in 1893 and has since continued to
                            attract gifts
                            and bequests</p>
                    </li>
                    }
                </ul>
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
    <div class="row-fluid span8">

    </div>
</div>


</body>
</html>
<script type="text/javascript">
    $('.carousel').carousel()
</script>